<template>
  <q-dialog maximized flat persistent ref="dialog">
    <q-form class="dialog_card column">
      <h5 class="view_title justify-between q-px-md">
        新增话题
        <q-btn dense outline round icon="clear" size="sm" v-close-popup />
      </h5>
      <div class="col">
        <q-scroll-area class="fit">
          <q-list bordered class="q-ma-md" :clickable="false">
            <q-item v-ripple>
              <q-item-section>
                <div style="display: flex">
                  <q-avatar size="40px">
                    <q-img style="width: 40px; height: 40px" :src="imagePath(forumlist.avatar)"></q-img>
                  </q-avatar>
                  <q-item-label style="font-size: 15px">{{ forumlist.unnamed }}</q-item-label>
                </div>
                {{ forumlist.forumText }}
                <viewer class="label-list q-mb-sm" style="max-height: 100px" ref="viewer" :options="options" :images="forumlist.viedoUrls" v-if="forumlist.viedoUrls && forumlist.viedoUrls.length > 0" @inited="inited">
                  <img v-for="(src, index) in forumlist.viedoUrls" class="q-pl-sm" :key="index" :src="src" style="object-fit: contain; max-height: 100%; max-width: 150px" />
                </viewer>
                <!-- 评论区域 -->
                <!-- <div class="bg-grey-5 q-ma-md" style="min-height: 100px"></div> -->
                <div v-if="forumlist.topic && forumlist.topic != null">
                  <q-chip dense icon="bookmark" v-if="forumlist.topic.label != null">{{ forumlist.topic.label }}</q-chip>
                </div>
                <q-list class="">
                  <q-item style="display: flex" :clickable="true">
                    <q-item-section style="display: flex; flex-direction: row" @click="showForum(index)"><q-icon name="mdi-chat-processing-outline" size="xs" style="text-align: center"></q-icon> <span v-if="Array.isArray(forumlist.childForums)">{{ forumlist.childForums.length }}</span> <span
                        v-else>0</span></q-item-section>
                  </q-item>
                  <div style="position: absolute; right: 100px; top: 70%">
                    <q-icon name="mdi-thumb-up-outline" color="black-4" size="xs" style="text-align: center" @click="addLike(item.id)">点赞</q-icon>
                  </div>
                  <q-item v-show="forumlist.showForumFlag" :clickable="true">
                    <q-item-section style="">
                      <Forum :parentId="forumlist.id"></Forum>
                    </q-item-section>
                  </q-item>
                  <!--              子评论               -->
                  <q-item v-show="forumlist.showForumFlag">
                    <q-item-section>
                      <q-list bordered class="q-ma-md" :clickable="false">
                        <q-item v-ripple v-for="(childItem, index2) in forumlist.childForums" :key="index2">
                          <q-item-section>
                            <div style="display: flex">
                              <q-avatar size="40px">
                                <q-img style="width: 40px; height: 40px" :src="imagePath(childItem.avatar)"></q-img>
                              </q-avatar>
                              <q-item-label style="font-size: 15px">{{ childItem.unnamed }}</q-item-label>
                            </div>
                            {{ childItem.forumText }}
                            <viewer class="label-list q-mb-sm" style="max-height: 100px" ref="viewer" :options="options" :images="childItem.viedoUrls" v-if="childItem.viedoUrls && childItem.viedoUrls.length > 0" @inited="inited">
                              <img v-for="(src, index) in childItem.viedoUrls" class="q-pl-sm" :key="index" :src="src" style="object-fit: contain; max-height: 100%; max-width: 150px" />
                            </viewer>
                            <div style="display: flex; justify-content: center" @click="showChildChildForum(index, index2, childItem.showChildForumFlag)">
                              <!-- <q-item-section style="display: flex; flex-direction: row"> -->
                              <q-icon name="mdi-chat-processing-outline" size="xs" style="text-align: center"></q-icon>回复
                              <!-- </q-item-section> -->
                            </div>
                            <!-- 放置所有子评论的子评论 -->
                            <div class="bg-grey-1">
                              <div class="bg-grey-2" v-if="childItem.showChildForumFlag">
                                <Forum :parentId="childItem.id" :discussion="'@' + childItem.unnamed + ' ' + childItem.forumText"></Forum>
                              </div>
                              <div v-if="childItem.childForums && childItem.childForums.length > 0">
                                <q-list bordered class="q-ma-md" :clickable="false">
                                  <q-item v-ripple v-for="(item3, index3) in childItem.childForums" :key="index3" :clickable="false">
                                    <q-item-section>
                                      <div style="display: flex">
                                        <q-avatar size="40px">
                                          <q-img style="width: 40px; height: 40px" :src="imagePath(childItem.avatar)"></q-img>
                                        </q-avatar>
                                        <q-item-label style="font-size: 15px">{{ childItem.unnamed }}</q-item-label>
                                      </div>

                                      {{ item3.forumText }}
                                      <viewer class="label-list q-mb-sm" style="max-height: 100px" ref="viewer" :options="options" :images="item3.viedoUrls" v-if="item3.viedoUrls && item3.viedoUrls.length > 0" @inited="inited">
                                        <img v-for="(src, index) in item3.viedoUrls" class="q-pl-sm" :key="index" :src="src" style="object-fit: contain; max-height: 100%; max-width: 150px" />
                                      </viewer>
                                      <q-item-label class="bg-grey-2 q-pa-sm">{{ item3.discussion }}</q-item-label>
                                      <div style="display: flex; justify-content: center" @click="showLastForum(index, index2, index3)">
                                        <!-- <q-item-section style="display: flex; flex-direction: row"> -->
                                        <q-icon name="mdi-chat-processing-outline" size="xs" style="text-align: center"></q-icon>回复
                                        <!-- </q-item-section> -->
                                      </div>
                                      <div class="bg-grey-2" v-if="item3.showChildForumFlag">
                                        <Forum :parentId="childItem.id" :discussion="'@' + item3.unnamed + ' ' + item3.forumText"></Forum>
                                      </div>
                                    </q-item-section>
                                  </q-item>
                                </q-list>
                              </div>
                            </div>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-item-section>
            </q-item>
          </q-list>
        </q-scroll-area>
      </div>
      <div class="row justify-center q-pa-md">
        <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
        <q-btn class="q-mx-md" color="primary" icon="mdi-check-bold" label="提交" type="submit" />
      </div>
    </q-form>
  </q-dialog>
</template>

<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';
import Forum from './forum.vue';

export default {
  name: 'TopForumDialog',
  components: {
    Forum,
  },
  props: {
    // id: {
    //   type: String,
    //   default: '67ae0b52c061b0caa7ef7c62',
    // },
  },
  data() {
    return {
      id: '',
      showTopForm: true,
      options: {
        title: false,
      },
      ws: null,
      emptyTopicForm: {
        topic: {},
        unnamedFlag: false,
        forumText: '',
        viedoUrls: [],
      },
      imgUrl: `${process.env.BASE_URL}/sys/common/static`,
      index: 0, // 当前图片的索引
      // 话题列表数据
      forumlist: {},
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      viewer: null,
      url: {
        queryById: '/forum/queryById',
      },
    };
  },
  watch: {

  },
  computed: {},
  methods: {
    addLike(forumId) {
      this.$axios.post('/user/forumLike/add', { userId: this.$store.state.User.info.username, forumId });
    },
    imagePath(src) {
      let path = '';
      if (src) {
        if (src.startsWith('http')) {
          return src;
        }
        path = `${this.imgUrl}/${src}`;
      }
      return path;
    },
    showLastForum(index, index2, index3) {
      this.forumlist.childForums[index2].childForums[index3].showChildForumFlag = !this.forumlist.childForums[index2].childForums[index3].showChildForumFlag;
    },
    showChildChildForum(index, childIndex, mesg) {
      this.forumlist.childForums[childIndex].showChildForumFlag = !this.forumlist.childForums[childIndex].showChildForumFlag;
      // this.$set(this.forumlist[index].childForums[childIndex], 'showChildForumFlag', false);
    },
    showForum(index) {
      this.forumlist.showForumFlag = !this.forumlist.showForumFlag;
    },
    loadData() {
      this.$axios.get(this.url.queryById, { params: { id: this.id } }).then((res) => {
        this.forumlist = res.result;
        this.$set(this.forumlist, 'showForumFlag', false);

        if (this.forumlist.childForums) {
          this.forumlist.childForums.map((v1) => {
            this.$set(v1, 'showChildForumFlag', false);
            v1.childForums.map((v2) => {
              this.$set(v2, 'showChildForumFlag', false);
            });
          });
        }
      });
    },
    // 初始化预览组件
    inited(viewer) {
      this.$viewer = viewer;
    },
    show(id) {
      this.id = id;
      this.loadData();
      this.$refs.dialog.show();
    },
    hide() {
      this.$refs.dialog.hide();
    },

  },
  created() {
  },
  mounted() {
  },
};
</script>
<style lang="stylus"
       scope></style>
